<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css">
    <style>
      circle{
        cursor: pointer;
      }
    </style>
  </head>
  <body>

    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const svg = d3.select('body').append('svg')
        .attr('width',800)
        .attr('height',500)
        .style('border','1px solid #ccc')


      const data = [100,200,150,120,240,300,80] ;
      const r = d3.scaleLinear(d3.extent(data),[30,60]);
      
      const domain = [] ;
      for(let i=0;i<data.length;i++){
        domain.push(i);
      }
      const c = d3.scaleOrdinal(domain,d3.schemeSet3);

      const circleSelection = svg.selectAll('circle')
          .data(data)
          .join('circle')
          .attr('cx',(d,i)=>120*i+60)
          .attr('cy',250)
          .attr('r',d=>r(d))
          .attr('fill',(d,i)=>c(i))

      
      const tip = d3.tip()
          .html(function(e,d){
            return `<div>数据:${d}</div>`
          })
          .attr('class','d3-tip')
          .direction('s')
          .offset([50,50])
      svg.call(tip);
      
      circleSelection
        .on('mouseover',tip.show)
        .on('mouseout',tip.hide)
    </script>
  </body>
</html>
